<template>
	<view class="saleAfter">
		<!-- <view class="shopCenter dFlex jStart_aStart">
			<view class="shopImg imgPublic">
				<image :src="shopInfo.goods.main_img" mode="widthFix"></image>
			</view>
			<view class="shopInfo">
				<view class="shopName">{{shopInfo.goods.title}}</view>
				<view class="sku">{{shopInfo.goods_attr?shopInfo.goods_attr:'默认'}}</view>
			</view>
		</view> 
		<view class="service dFlex jBetween_aCenter">
			<text>服务保障</text>
			<view class="rightIcon imgPublic">
				<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/rightIcon.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="service dFlex jBetween_aCenter" v-if="type == '2'">
			<text>退换货运费规则</text>
			<view class="rightIcon imgPublic">
				<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/rightIcon.png" mode="widthFix"></image>
			</view>
		</view> -->
		<view class="serve" v-if="type == '1'">
			<view class="line dFlex jStart_aStart" @tap='next(2)' v-if="shopInfo.trade_status != 10">
				<view class="lineIcon imgPublic">
					<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/afterSale/thtk.png" mode="widthFix"></image>
				</view>
				<view class="lineContent dFlex jBetween_aCenter">
					<view class="content">
						<view class="serveName">我要退货退款</view>
						<view class="desc">商品已自提，需要先将商品退回至服务点</view>
					</view>
					<view class="rightIcon imgPublic">
						<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/rightIcon.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="line dFlex jStart_aStart" @tap='next(1)' v-if="shopInfo.trade_status != 10">
				<view class="lineIcon imgPublic">
					<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/afterSale/tk.png" mode="widthFix"></image>
				</view>
				<view class="lineContent dFlex jBetween_aCenter">
					<view class="content">
						<view class="serveName">我要退款 (货在服务点)</view>
						<view class="desc">商品未自提，或与团长协商一致只退款无需退货</view>
					</view>
					<view class="rightIcon imgPublic">
						<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/rightIcon.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="line dFlex jStart_aStart" @tap='next(3)' >
				<view class="lineIcon imgPublic">
					<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/afterSale/tk.png" mode="widthFix"></image>
				</view>
				<view class="lineContent dFlex jBetween_aCenter">
					<view class="content">
						<view class="serveName">我要退款 (缺货/货未送达)</view>
						<view class="desc">平台或团长告知商品缺货，或商品未按时送达服务点</view>
					</view>
					<view class="rightIcon imgPublic">
						<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/rightIcon.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="serve" v-if="type == '2'">
			<view class="line dFlex jStart_aStart" @tap='next(2)' v-if="shopInfo.trade_status != 10">
				<view class="lineIcon imgPublic">
					<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/afterSale/thtk.png" mode="widthFix"></image>
				</view>
				<view class="lineContent dFlex jBetween_aCenter">
					<view class="content">
						<view class="serveName">我要退货退款</view>
						<view class="desc">已收到货，需要退还已收到的货物</view>
					</view>
					<view class="rightIcon imgPublic">
						<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/rightIcon.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="line dFlex jStart_aStart" @tap='next(1)'>
				<view class="lineIcon imgPublic">
					<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/afterSale/tk.png" mode="widthFix"></image>
				</view>
				<view class="lineContent dFlex jBetween_aCenter">
					<view class="content">
						<view class="serveName">我要退款 (无需退货)</view>
						<view class="desc">未发货或者未收到货，或与我们协商之后申请</view>
					</view>
					<view class="rightIcon imgPublic">
						<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/rightIcon.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		orderList
	} from '@/tools/http.js';
	import {domain} from '@/tools/config.js';
	import tools from '@/tools/tools.js';
	export default {
		data() {
			return {
				order_id:'',
				orderDetailId:'',
				shopInfo:{},
				type:'',// 1服务点  2快递
			};
		},
		onLoad(e){
			console.log(e);
			this.order_id = e.order_id;
			this.orderDetailId = e.orderDetailId;
			this.type = e.type;
			this.initData();
		},
		methods:{
			// 商品详情
			async initData(){
				let res = await orderList({
					ids:this.order_id
				});
				if(res){
					res[0].address_json = res[0].address_json?JSON.parse(res[0].address_json):{};
					res[0].createtime = tools.timestamptoData(res[0].createtime * 1000,1);
					res[0].pay_time = res[0].is_pay?tools.timestamptoData(res[0].pay_time * 1000,1):'';
					res[0].ordergoods.map((item2,index2)=>{
						var reg=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
						if(!reg.test(item2.goods.main_img)){
							item2.goods.main_img = item2.goods.main_img.startsWith('https')?item2.goods.main_img:domain+item2.goods.main_img;
						}
					})
					this.shopInfo = res[0];
				}
			},
			// 售后下一步
			next(idx){
				uni.navigateTo({
					url:'./applySale?order_id='+this.order_id+'&order_detail_id='+this.orderDetailId+'&refund_type='+idx+'&type='+this.type,
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #F4F4F4;
	}
	.serve{
		width: 100%;
		.line{
			width: 100%;
			background: white;
			margin-top: 20rpx;
			padding: 60rpx 30rpx;
			box-sizing: border-box;
			.lineContent{
				flex: 1;
				.content{
					flex: 1;
					color: #999999;
					font-size: 13px;
					.serveName{
						font-size: 17px;
						font-weight: 500;
						color: #333333;
						margin-bottom: 14rpx;
					}
				}
				.rightIcon{
					width: 30rpx;
				}
			}
			.lineIcon{
				width: 40rpx;
				height: 40rpx;
				margin-right: 24rpx;
			}
		}
	}
	.service{
		width: 100%;
		background: white;
		padding: 28rpx 30rpx;
		box-sizing: border-box;
		.rightIcon{
			width: 30rpx;
		}
	}
	.shopCenter{
		width: 100%;
		background: white;
		padding: 30rpx;
		box-sizing: border-box;
		.shopImg{
			width: 120rpx;
			height: 120rpx;
			margin-right: 20rpx;
		}
		.shopInfo{
			width: calc(100% - 70px);
			.shopName{
				width: 100%;
				overflow: hidden;
				-webkit-line-clamp: 2;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				font-size: 15px;
			}
			.sku{
				color: #999999;
				font-size: 14px;
				margin-top: 12rpx;
			}
		}
	}
</style>
